<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>70-可视化</title>
  <link rel="stylesheet" href="./fonts/icomoon.css">
  <link rel="stylesheet" href="css/index.css">

  </style>
</head>

<body>
  <header class="vis-header">
    <img src="./images/logo.png" alt="">
  </header>

  <!-- 正文 内容 -->
  <div class="main">
    <div class="left">

      <!-- 设备总数 -->
      <div class="device-count">
        <div class="device-count-item">
          <div class="device-value">2,190</div>
          <div class="device-name">设备总数</div>
        </div>
        <div class="device-count-item">
          <div class="device-value">2,190</div>
          <div class="device-name">设备总数</div>
        </div>
        <div class="device-count-item">
          <div class="device-value">2,190</div>
          <div class="device-name">设备总数</div>
        </div>
        <div class="device-count-item">
          <div class="device-value">2,190</div>
          <div class="device-name">设备总数</div>
        </div>
      </div>

      <!-- 故障设备监控 -->
      <div class="fault-device p-30 m-t-20">
        <!-- 标题 -->
        <div class="fault-device-title">
          <h4>故障设备监控</h4>
          <div class="line"></div>
          <h4>异常设备监控</h4>

        </div>
        <!-- 内容 -->
        <div class="fault-device-content">
          <div class="fault-device-content-title">
            <div>故障时间</div>
            <div>设备地址 </div>
            <div>设备地址异常代码</div>
          </div>
          <div class="fault-device-content-list">

            <ul>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>


              <!-- ================ -->

              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>
              <li>
                <div>20180705</div>
                <div>11北京市昌平西路金燕龙写字楼</div>
                <div>10000011</div>
              </li>



            </ul>
          </div>

        </div>

      </div>

      <!-- 点位分布统计 -->
      <div class="pd m-t-20 p-30">
        <h4 class="pd-title fs-22">点位分布统计</h4>
        <div class="pd-content">
          <!-- 2 div  -->
          <div class="pd-content-chart">1</div>
          <div class="pd-content-info">
            <div class="pd-item">
              <div class="pd-value">2,190</div>
              <div class="pd-name">设备总数</div>
            </div>
            <div class="pd-item">
              <div class="pd-value">2,190</div>
              <div class="pd-name">设备总数</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="center">


      <!-- 设备数据统计 -->
      <div class="device-data">


      </div>

      <!-- 全国用户总量统计 -->
      <div class="users m-t-20 p-30">

      </div>


    </div>
    <div class="right">
      <!-- 订单量 -->
      <div class="order-count p-20">
        <div class="order-title">

        </div>
        <div class="order-content m-t-10">
          <div class="order-item">
            <div class="order-value"> </div>
            <div class="order-name">订单量</div>
          </div>
          <div class="order-item">
            <div class="order-value"> </div>
            <div class="order-name">销售额（万元）</div>
          </div>
        </div>
      </div>

      <!-- 销售额统计 -->
      <div class="sell-count m-t-20 p-20">
        <div class="sell-count-title">
          <h4>销售额统计</h4>
          <div class="subtitles">


          </div>
        </div>
        <div class="sell-count-content"></div>
      </div>

      <!-- 渠道分布 -->
      <div class="channel m-t-20 ">
        <div class="channel-distribute"></div>
        <div class="channel-progress p-20">
          <h4>一季度销售进度</h4>
          <div class="channel-charts"></div>
        </div>
      </div>

      <!-- 全国热榜 -->
      <div class="rank m-t-20"></div>

    </div>
  </div>

  <!-- 1 引入echarts -->
  <script src="./lib/echarts.min.js"></script>

  <!-- 引入jq -->
  <script src="./lib/jquery.js"></script>

  <script src="./lib/data.js"></script>

  <!-- 3 引入自己的js文件 -->
  <script src="./js/index.js"></script>

</body>

</html>